<template>
  <!-- 书籍详情页内容数据 -->
  <div class="detailsContent container">
    
    <!-- 书籍介绍结构 -->
    <div class="row d-flex justify-content-between mb-2">
      <div class="card mb-0  mb-md-2 col-12 col-md-6 shadow-sm theBorder" style="border-radius: 0px;" v-for="(v, k) in this.$store.state.mobiBooks">
        <div class="row no-gutters">
          <div class="col-xl-3 col-md-4 col-2 py-2 d-flex justify-content-center align-items-center">
            <router-link to='/bookDetails'>
              <img :src="v.images" class="img-fluid bookBoxs" alt=""  @click="getInto(v.id)">
            </router-link>
          </div>

          <div class="col-xl-9 col-md-8 col-10">
            <div class="card-body p-0 mt-2 ml-3">
              <h5 class="card-title d-none d-md-block" @click="getInto(v.id)"><router-link to='/bookDetails' class="text-dark">{{v.name}}</router-link></h5>
              <p class="card-title d-block d-md-none" @click="getInto(v.id)"><router-link to='/bookDetails' class="text-dark">{{v.name}}</router-link></p>
              <p class="card-text boxs">{{v.desc}} </p>
              <p class="card-text"><small class="text-muted">{{v.author}}</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页导航栏 -->
    <nav>
      <ul class="pagination justify-content-center theM">
        <li class="page-item" :class="{disabled: nowKey == 0}" @click="getPrevious">
          <a class="page-link" href="#">
            <span>&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <ul class="pagination justify-content-center" v-for='(v, k) in getBooksTotal'>
          <li class="page-item"><a class="page-link" :class="{btnColor: k == nowKey}" href="#" @click="getBooks(v, k)">{{v}}</a></li>
        </ul>
        <li class="page-item" :class="{disabled: nowKey == getBooksTotal.length-1}"  @click="getNext">
          <a class="page-link" href="#">
            <span>&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
    
  </div>
</template>

<script>
  export default {
    name: 'DetailsContent',
    data () {
      return {
        nowKey: '',
        getObj: {
          num: 1,
          size: 10,
          table: 'mobibooks',
          title: sessionStorage.getItem('titleName')
        }
      }
    },
    mounted() {
      setTimeout(() => {
        // 发送书籍分页查询的数据
        this.$store.dispatch('asynGetMobiBooks', this.getObj);
      }, 100);
      // 请求书籍的总数
      this.$store.dispatch('asynGetMobiBooksTotal', this.getObj.title);
    },
    methods: {
      getInto(index) {
        // 改变本地当前的书籍Id
        localStorage.setItem('booksId', index);
      },
      getBooks(v, k) {
        this.getObj.num = v;
        this.nowKey = k;
        // 通过获取当前键值来发送书籍分页查询的数据
        this.$store.dispatch('asynGetMobiBooks', this.getObj);
      },
      getPrevious() {
        // 键值减少
        if (this.getObj.num > 1) {
          this.getObj.num--;
          this.$store.dispatch('asynGetMobiBooks', this.getObj);
        } else {
          this.getObj.num == 1;
        }
          this.nowKey = this.getObj.num-1;
      },
      getNext() {
        // 键值增加
        if (this.getObj.num < this.getBooksTotal.length) {
          this.getObj.num++;
          this.$store.dispatch('asynGetMobiBooks', this.getObj);
        } else {
          this.getObj.num = this.getBooksTotal.length;
        }
        this.nowKey = this.getObj.num-1;
      }
    },
    computed: {
      getBooksTotal() {
        // 接收到当前书籍总数
        let booksTotal =  this.$store.state.mobiBooksTotal;
        let total;
        let booksArr = [];
        // 判断分页导航栏的分页数量
        (booksTotal % this.getObj.size) > 0 ? (total = parseInt(booksTotal / this.getObj.size) + 1 ) : (total = (booksTotal / this.getObj.size));
        for (let i = 0; i < total; i++) {
          booksArr[i] = i+1;
        }

        return booksArr;
      }
    }
  }

</script>

<style scoped>
  .theBorder {
    border-bottom: 0px;
    background-color: rgb(250, 250, 250)
  }

  .bookBoxs:hover {
    transform: translateY(-5px);
    transition: all .2s ease;
    border: 1px solid #ddd;
    box-shadow: 5px 8px 5px #aaa;
  }
  
  .boxs {
    max-height: 110px;
    overflow: auto;
  }

  [class*="col-lg"] {
    margin: 0 -4px;
  }

  .btnColor {
    color: #FFF;
    background-color: rgb(0, 123, 255);
  }

  .theM {
    margin-bottom: 10px;
  }

  @media (max-width: 575px) {
    body p {
      font-size: .875em;
    }
    .theBorder {
      border-bottom: .2px solid #eee;
    }
    .boxs {
      max-height: 40px;
      overflow: auto;
    }
    .theM {
      margin-bottom: -10px;
    }
  }
</style>